
<template>
  <div>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="header_btn_box">
            <!-- designer -->
            <router-link :to="{ path: '/bpm/formDesigner', query: { type: 'add' } }" style="margin-right: 10px;">
              <el-button type="primary" size="mini" icon="el-icon-edit">
                新增
              </el-button>
            </router-link>
            <el-button
              :loading="downloadLoading"
              type="primary"
              icon="el-icon-download"
              size="mini"
              @click="handleDownload()"
            >导出</el-button>
            <el-button type="primary" icon="el-icon-delete" size="mini" @click="batchDelNotice()">批量删除</el-button>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="showSearch = !showSearch">高级查询</el-button>

          </div>
        </el-col>
      </el-row>

      <transition name="el-zoom-in-top">
        <el-form v-show="showSearch" ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="流程编号">
                <el-input v-model="form.processId" placeholder="请输入流程编号" clearable />
              </el-form-item>
              <el-form-item label="流程名称">
                <el-input v-model="form.processName" placeholder="流程名称" clearable />
              </el-form-item>
              <el-form-item label="流程分类">
                <el-input v-model="form.processType" placeholder="请输入流程分类" clearable />
              </el-form-item>
              <el-form-item label="状态" class="iscomment">
                <el-select v-model="form.status" placeholder="请选择" @change="statusChange()">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="searchGroup">
              <el-button type="primary" size="small" @click="searchKey()">查询</el-button>
              <el-button type="primary" size="small" @click="reset()">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </transition>
      <!-- 通知列表区域 -->
      <el-table
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        :data="noticeList"
        border
        stripe
        sortable="custom"
        @selection-change="selectionChange"
        @sort-change="changeTableSort"
      >
        <el-table-column fixed="left" type="selection" width="60" />
        <el-table-column prop="processId" label="流程编号" fixed />
        <el-table-column prop="processName" label="流程名称" />
        <!-- <el-table-column prop="processType" label="流程分类"></el-table-column> -->
        <el-table-column prop="creator" label="创建者" width="120" />
        <el-table-column prop="crateDate" label="创建时间" sortable="custom" />
        <el-table-column
          prop="status"
          label="状态"
          width="100"
          :filters="[{ text: '开启', value: '开启' }, { text: '关停', value: '关停' }]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status === '开启' ? 'success' : 'danger'"
              disable-transitions
            >{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <!-- fixed="right" -->
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <!-- <router-link :to="{ path: '/preview', query: { Id: scope.row.id } }" target='_blank' title="预览">
                <el-button type="primary" size="mini" icon="el-icon-view"></el-button>
            </router-link> designer formDesigner-->
            <router-link :to="{ path: '/bpm/formDesigner', query: { Id: scope.row.processId, type: 'edit' } }" title="编辑">
              <el-button type="primary" size="mini" icon="el-icon-edit" style="margin-left: 10px;" />
            </router-link>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              style="margin-left: 10px;"
              title="删除"
              @click="delContent(scope.row.id)"
            />
          </template>

        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        class="user-pagination"
        :current-page="queryInfo.pagenum"
        :page-sizes="[10, 30, 50]"
        :page-size="queryInfo.pagesize"
        :total="queryInfo.total"
        layout="total,sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import { addNoticeList, delNoticeList, AlldelNoticeList, ExportList } from '@/api/newUsertest'
import { getProcessList } from '@/api/processNew'

export default {

  data() {
    return {
      // 获取公告信息列表对象
      queryInfo: {
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 10,
        // 总页数
        total: 0
      },
      // 查询
      options: [{
        value: '0',
        label: '全部'
      }, {
        value: '1',
        label: '是'
      }, {
        value: '2',
        label: '否'
      }],

      form: {
        processId: '',	// 标题
        processName: '',	// 文章内容
        processType: '',
        status: '0' // 是否开启评论

      },
      value: '0',
      order: '2', // 默认排序 降序
      showSearch: false,
      searchinput: '',
      // 添加通知对话框
      addDialogVisible: false,
      // 边界操作
      editVisible: false,
      // 通知列表
      noticeList: [],
      isloading: false,
      // 编辑对话框
      editForm: {
        content: '',
        publish_date: '',
        radioEdit: '',
        id: 0,
        operator: ''
      },
      selecteDta: [], // 存放勾选的数据
      downloadLoading: false, // 导出
      ExportList: [] // 存放要导出的数据
    }
  },
  created() {
    // this.$store.dispatch('getNoticelist')
    this.getProcessList()
  },
  methods: {
    filterTag(value, row) {
      return row.status === value
    },

    // 移除HTML标签
    delTag(str) {
      return str.replace(/<[^>]+>/g, '')
    },

    // 获取列表数据
    getProcessList() {
      this.form.pagenum = this.queryInfo.pagenum
      this.form.pagesize = this.queryInfo.pagesize
      this.form.order = this.order
      // 合并参数
      const query = this.form
      console.log('shd', query)
      getProcessList({
        query
      }).then(response => {
        console.log(response.data)
        this.isloading = true
        this.noticeList = response.data.content
        this.queryInfo.pagenum = response.data.pagenum
        this.queryInfo.pagesize = response.data.pagesize
        this.queryInfo.total = response.data.total
        for (var i = 0; i < response.data.content.length; i++) {
          if (response.data.content[i].status === '1') {
            this.noticeList[i].status = '开启'
          } else {
            this.noticeList[i].status = '关停'
          }
        }
      })
    },
    // type序号 - 页面切换递增
    indexAdd(index) {
      // console.log(index, 222222)
      const page = this.queryInfo.pagenum // 当前页码
      const pagesize = this.queryInfo.pagesize // 每页条数
      return index + 1 + (page - 1) * pagesize
    },
    // 监听 pagesize 改变的事件
    handleSizeChange(val) {
      this.queryInfo.pagesize = val
      this.getNoticeList()
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(val) {
      this.queryInfo.pagenum = val
      this.getNoticeList()
    },
    // 字段排序
    changeTableSort(e) {
      if (e.order === 'descending') {
        this.order = 2
      } else if (e.order === 'ascending') {
        this.order = 1
      }
      this.getNoticeList()
    },

    // 删除公告
    delContent(id) {
      console.log(id)
      this.$confirm('此操作将永久删除该公告, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delNoticeList({
          'id': id
        }).then(response => {
          console.log(response.data)
        })
        this.getNoticeList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    /** 批量删除 */
    batchDelNotice() {
      // console.log(this.multipleSelection, 'multipleSelection')
      if (this.selecteDta.length <= 0) {
        this.$message({
          type: 'warning',
          message: '请至少勾选一条数据',
          showClose: true
        })
        return
      }
      const params = []
      this.selecteDta.forEach(item => {
        params.push(item)
      })
      console.log(this.selecteDta)
      console.log(params)
      this.$confirm('此操作将永久批量删除选择数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('输出123')
        AlldelNoticeList({
          params
        }).then(res => {
          console.log('输出', res)
          if (res.code === 20000) {
            this.$message.success('批量删除成功！')
            this.getNoticeList()
          }
        })
          .catch(err => {
            console.log(err)
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 初始化新增公告对话框
    // addDialogOpen () {
    //   this.addDialogVisible = true
    //   this.addList.content = ''
    //   this.addList.publish_date = ''
    //   this.addList.radioPub = '1'
    //   this.addList.radioSta = '1'
    // },
    // 确认新增数据
    addListConfirm() {
      var status 
      var operate_time = new Date().format('yyyy-MM-dd hh:mm:ss')
      if (this.addList.radioSta === '1') {
        status = '是'
      } else {
        status = '否'
      }
      addNoticeList({
        'content': this.addList.content,
        'publish_date': this.addList.publish_date,
        // 'status': status,
        'status': this.addList.radioSta,
        'operate_time': operate_time
      }).then(response => {
        if (response.code !== 20000) {
          this.$message.error('添加公告失败！')
        } else {
          this.$message.success('添加公告成功！')
        }
        console.log(response.data)
        this.noticeList = response.data.content.newsList
        this.queryInfo.total = response.data.total
      })
      this.addDialogVisible = false
      this.getNoticeList()
    },
    //
    selectionChange: function(selections) {
      this.selecteDta = selections.map(row => row.id)
      console.log(this.selecteDta)
    },
    // 查询数据
    statusChange() {
      console.log(this.form.status)
      this.getNoticeList()
    },
    searchKey() {
      console.log(this.form)
      this.getNoticeList()
    },
    // 重置
    reset() {
      // this.value = '0',
      // this.searchinput = "",
      this.form = {
        title: '',	// 标题
        content: '',	// 文章内容
        author: '',
        status: '0' // 是否开启评论
        // createDateStart: "",	// 创建日期
        // createDateEnd: "",
        // showDateStart: "",	// 上线日期
        // showDateEnd: ""
      },
      this.getNoticeList()
    },
    // 导出数据
    handleDownload() {
      this.downloadLoading = true
      this.form.pagenum = ''
      this.form.pagesize = ''
      const params = []
      this.selecteDta.forEach(item => {
        params.push(item)
      })
      this.form.params = params
      // 合并参数
      const query = this.form
      console.log('shd', query)
      // 获取要导出的数据
      ExportList({ query }).then(res => {
        console.log(res.data.content)
        this.ExportList = res.data.content
        for (var i = 0; i < res.data.content.length; i++) {
          if (res.data.content[i].status === '1') {
            this.ExportList[i].status = '是'
          } else {
            this.ExportList[i].status = '否'
          }
        }
        import('@/vendor/Export2Excel').then(excel => {
          // const tHeader = {
          // '标题': 'title',
          // '发布日期': 'publish_date',
          // '操作者': 'operator',
          // '操作时间': 'operate_time',
          // }
          const tHeader = ['文章ID', '标题', '发布日期', '作者', '操作者', '操作时间']
          const filterVal = ['id', 'title', 'publish_date', 'author', 'operator', 'operate_time']
          const data = this.formatJson(filterVal)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: '数据导出'
          })
          this.downloadLoading = false
        })
      })
    },
    formatJson(filterVal) {
      console.log('this.ExportList', this.noticeList)
      return this.ExportList.map(v => filterVal.map(j => {
        // if (j === 'timestamp') {
        //   return parseTime(v[j])
        // } else {
        //   return v[j]
        // }
        return v[j]
      }))
    }

  }

  // computed: {
  //   datePickerVisible () {
  //     if (this.addList.radioPub === '1') {
  //       this.addList.publish_date = new Date().format('yyyy-MM-dd')
  //       return true
  //     } else {
  //       return false
  //     }
  //   }
  // }
}
</script>
  <style lang="scss">
  .fl {
    float: left;
  }

  .el-table .cell {
    white-space: nowrap !important;
  }

  .el-table__fixed,
  .el-table__fixed-right {
    height: 100% !important;
  }
  .header_btn_box{
  text-align: right;
  /* margin-bottom: 10px; */
   .el-button{
    margin-bottom: 10px;
  }
  }

  .iscomment {
    /* width: 22%; */
    margin-left: 30px;

    .el-select {
      width: 100px;
    }

    .el-form-item__label {
      width: 100px !important;
    }
  }
  .searchGroup {
    text-align: right;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  </style>
  <style lang="scss" scoped>
  .el-card {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
  }
  .el-form{
    margin-top: 10px;
  }
  .el-form-item {
    float: left;
    width: 300px;
  }

  .el-table {
    margin-top: 20px;
  }

  .el-pagination {
    overflow-x: auto;
    margin-top: 30px;
  }
  </style>

